<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>通用弹出层组件 layer - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>弹出层组件 🔥</h1>
<blockquote class="layui-elem-quote">
<p>弹出层组件 <code>layer</code> 是 <code>Layui</code> 最古老的组件，也是使用覆盖面最广泛的代表性组件。 <code>layer</code> 集众多弹层功能为一体，灵活而多样，是许多开发者的网页弹出层的首选交互方案，在各类业务场景都能发挥重要作用。</p>
</blockquote class="layui-elem-quote">
<h2 id="examples" lay-toc="{anchor: null}">示例</h2>
<p>点击下述按钮，查看每个示例对应的弹层效果。</p>
<div>
<h2 lay-toc="{id: 'examples', level: 2, hot: true}" class="layui-hide">在线测试</h2>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '在线测试'}, layout: ['preview']}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    &lt;textarea class="layui-textarea ws-demo-editor" id="ID-demo-editor" &gt;
// 在此处输入 layer 的任意代码
layer.open({
  type: 1, // page 层类型
  area: ['500px', '300px'],
  title: 'Hello layer',
  shade: 0.6, // 遮罩透明度
  shadeClose: true, // 点击遮罩区域，关闭弹层
  maxmin: true, // 允许全屏最小化
  anim: 0, // 0-6 的动画形式，-1 不开启
  content: '<div style="padding: 32px;">一个普通的页面层，传入了自定义的 HTML</div>'
});&lt;/textarea&gt;
  </div>
  <div>
    <button type="button" class="layui-btn" id="ID-demo-run">运行效果</button>
  </div>
</div>
<script>
layui.use(function(){
  var $ = layui.$;
  var layer = layui.layer;
  $('#ID-demo-run').on('click', function(){
    var code = $('#ID-demo-editor').val();
    try {
      new Function(code)();
    } catch(e) {
      layer.alert('语句异常：'+ e.message, {icon: 2})
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="type" lay-toc="{level: 2, hot: true}">弹层类型</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '弹层类型'}, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="alert">Alert</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="confirm">Confirm</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="msg">Msg</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="page">Page</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="iframe">Iframe</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="load">Load</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="tips">Tips</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="prompt">Prompt</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="photots">Photots</button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  // 批量事件
  util.on('lay-on', {
    alert: function(){
      layer.alert('对话框内容');
    },
    confirm: function(){
      layer.confirm('一个询问框的示例？', {
        btn: ['确定', '关闭'] //按钮
      }, function(){
        layer.msg('第一个回调', {icon: 1});
      }, function(){
        layer.msg('第二个回调', {
          time: 20000, // 20s 后自动关闭
          btn: ['明白了', '知道了']
        });
      });
    },
    msg: function(){
      layer.msg('一段提示信息');
    },
    page: function(){
      // 页面层
      layer.open({
        type: 1,
        area: ['420px', '240px'], // 宽高
        content: '<div style="padding: 11px;">任意 HTML 内容</div>'
      });
    },
    iframe: function(){
      // iframe 层
      layer.open({
        type: 2,
        title: 'iframe test',
        shadeClose: true,
        shade: 0.8,
        area: ['380px', '80%'],
        content: '/layer/test/1.html' // iframe 的 url
      });
    },
    load: function(){
      var index = layer.load(0, {shade: false});
      setTimeout(function(){
        layer.close(index); // 关闭 loading
      }, 5000);
    },
    tips: function(){
      layer.tips('一个 tips 层', this, {
        tips: 1
      });
    },
    prompt: function(){
      layer.prompt({title: '密令输入框', formType: 1}, function(pass, index){
        layer.close(index);
        layer.prompt({title: '文本输入框', formType: 2}, function(text, index){
          layer.close(index);
          alert('您输入的密令：'+ pass +'；文本：'+ text);
        });
      });
    },
    photots: function(){
      layer.photos({
        photos: {
          "title": "Photos Demo",
          "start": 0,
          "data": [
            {
              "alt": "layer",
              "pid": 1,
              "src": "https://unpkg.com/outeres/demo/layer.png",
            },
            {
              "alt": "壁纸",
              "pid": 3,
              "src": "https://unpkg.com/outeres/demo/000.jpg",
            },
            {
              "alt": "浩瀚宇宙",
              "pid": 5,
              "src": "https://unpkg.com/outeres/demo/outer-space.jpg",
            }
          ]
        }
      });
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-alert" lay-toc="{level: 3}">信息框</h3>
<p>信息框即 <code>dialog</code> 类型层，对应默认的 <code>type: 0</code>，该类型的弹层同时只能存在一个。更多说明详见：<a href="index.html#options">#type</a></p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert">对话框带图标</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-confirm">询问框</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-dark">深色提示框</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-light">浅色提示框</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert-btn">自定义按钮</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-count-down">关闭倒计时</button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  // 事件
  util.on('lay-on', {
    "test-alert": function(){
      // 示范对话框所有内置图标
      var icon = 0;
      (function changeIcon(){
        layer.alert('点击确定，继续查看图标', {
          icon: icon,
          shadeClose: true,
          title: 'icon: '+ icon
        }, ++icon > 6 ? function(){
          layer.msg('内置图标演示完毕', {icon: 1});
        } : changeIcon);
      }());
    },
    "test-confirm": function(){
      layer.confirm('一个询问框的示例？', {icon: 3}, function(){
        layer.msg('点击确定的回调', {icon: 1});
      }, function(){
        layer.msg('点击取消的回调');
      });
    },
    "test-msg-dark": function(){
      layer.msg('深色提示框的示例');
    },
    "test-msg-light": function(){
      layer.msg('浅色提示框的示例', {icon: 0}, function(){
        // layer.msg('提示框关闭后的回调');
      });
    },
    "test-alert-btn": function(){
      layer.alert('自定义按钮', {
        btn: ['按钮一', '按钮二', '按钮三'],
        btnAlign: 'c', // 按钮居中显示
        btn1: function(){
          layer.msg('按钮一的回调');
        },
        btn2: function(){
          layer.msg('按钮二的回调');
        },
        btn3: function(){
          layer.msg('按钮三的回调');
        }
      });
    },
    "test-count-down": function(){
      layer.alert('在标题栏显示自动关闭倒计秒数', {
        time: 5*1000,
        success: function(layero, index){
          var timeNum = this.time/1000, setText = function(start){
            layer.title('<span class="layui-font-red">'+ (start ? timeNum : --timeNum) + '</span> 秒后自动关闭', index);
          };
          setText(!0);
          this.timer = setInterval(setText, 1000);
          if(timeNum <= 0) clearInterval(this.timer);
        },
        end: function(){
          clearInterval(this.timer);
        }
      });
    }
  })
});
</script>
  </textarea>
</pre>
<h3 id="demo-page" lay-toc="{level: 3}">页面层</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page">普通页面层</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-wrap">捕获层</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-title">剔除默认标题栏</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-move">绑定弹层的拖拽元素</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-custom">
    <span class="layui-badge-dot"></span> 弹出任意自定义内容
  </button>
</div>
<div id="ID-test-layer-wrapper" style="display: none;">
  <div style="padding:16px;">
    弹出已经存在于页面中的一段元素<br>
    通常是放置在 &amp;lt;body&amp;gt; 根节点下
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var $ = layui.$;
  var layer = layui.layer;
  var util = layui.util;
  var form = layui.form;
  // 事件
  util.on('lay-on', {
    'test-page': function(){
      layer.open({
        type: 1,
        // area: ['420px', '240px'], // 宽高
        content: '<div style="padding: 16px;">任意 HTML 内容</div>'
      });
    },
    'test-page-wrap': function(){
      layer.open({
        type: 1,
        shade: false, // 不显示遮罩
        content: $('#ID-test-layer-wrapper'), // 捕获的元素
        end: function(){
          // layer.msg('关闭后的回调', {icon:6});
        }
      });
    },
    'test-page-title': function(){
      layer.open({
        type: 1,
        area: ['420px', '240px'], // 宽高
        title: false, // 不显示标题栏
        closeBtn: 0,
        shadeClose: true, // 点击遮罩关闭层
        content: '<div style="padding: 16px;">任意 HTML 内容。可点击遮罩区域关闭。</div>'
      });
    },
    'test-page-move': function(){
      layer.open({
        type: 1,
        area: ['420px', '240px'], // 宽高
        title: false,
        content: ['<div style="padding: 11px;">',
          '任意 HTML 内容',
          '<div style="padding: 16px 0;">',
            '<button class="layui-btn" id="ID-test-layer-move">拖拽此处移动弹层</button>',
          '</div>',
        '</div>'].join(''),
        move: '#ID-test-layer-move'
      });
    },
    'test-page-custom': function(){
      layer.open({
        type: 1,
        area: '350px',
        resize: false,
        shadeClose: true,
        title: 'demo : layer + form',
        content: `
          <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
            <div class="demo-login-container">
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                  </div>
                  <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                  </div>
                  <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-row">
                  <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                      <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-vercode"></i>
                      </div>
                      <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                  </div>
                  <div class="layui-col-xs5">
                    <div style="margin-left: 10px;">
                      <img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-form-item">
                <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                <a href="index.html#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
              </div>
              <div class="layui-form-item demo-login-other">
                <label>社交账号登录</label>
                <span style="padding: 0 21px 0 6px;">
                  <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
                  <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
                  <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
                </span>
                或 <a href="index.html#reg">注册帐号</a></span>
              </div>
            </div>
          </div>
        `,
        success: function(){
          // 对弹层中的表单进行初始化渲染
          form.render();
          // 表单提交事件
          form.on('submit(demo-login)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
              title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
          });
        }
      });
    }
  })
});
</script>
  </textarea>
</pre>
<h3 id="demo-iframe" lay-toc="{level: 3}">iframe 层</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-handle">
    iframe 的父子操作
    <span id="ID-test-iframe-mark"></span>
  </button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-video">弹出多媒体</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-overflow">禁止 iframe 滚动条</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-curl">弹出任意 URL 页面</button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var $ = layui.$;
  var layer = layui.layer;
  var util = layui.util;
  // 事件
  util.on('lay-on', {
    'test-iframe-handle': function(){
      layer.open({
        type: 2,
        area: ['680px', '520px'],
        content: '/layer/test/iframe.html',
        fixed: false, // 不固定
        maxmin: true,
        shadeClose: true,
        btn: ['获取表单值', '取消'],
        btnAlign: 'c',
        yes: function(index, layero){
          // 获取 iframe 的窗口对象
          var iframeWin =  window[layero.find('iframe')[0]['name']];
          var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
          var value = elemMark.val();
          
          if($.trim(value) === '') return elemMark.focus();
          // 显示获得的值
          layer.msg('获得 iframe 中的输入框标记值：'+ value);
        }
      });
    },
    'test-iframe-video': function(){
      layer.open({
        type: 2,
        title: false,
        area: ['630px', '360px'],
        shade: 0.8,
        closeBtn: 0,
        shadeClose: true,
        content: '//player.youku.com/embed/XMzI1NjQyMzkwNA==' // video 地址
      });
      layer.msg('点击遮罩区域可关闭');
    },
    'test-iframe-overflow': function(){
      layer.open({
        type: 2,
        area: ['360px', '500px'],
        skin: 'layui-layer-rim', // 加上边框
        content: ['/layer/test/1.html', 'no'] // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
      });
    },
    'test-iframe-curl': function(){
      layer.open({
        type: 2,
        title: 'iframe 任意 URL',
        shadeClose: true,
        maxmin: true, //开启最大化最小化按钮
        area: ['900px', '600px'],
        content: 'https://cn.bing.com/'
      });
    }
  })
});
</script>
  </textarea>
</pre>
<h3 id="demo-load" lay-toc="{level: 3}">加载层</h3>
<p>为了不影响继续体验，以下每个 loading 示例均会在 3 秒后自动模拟关闭</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-1">风格1</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-2">风格2</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-3">风格3</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-4">风格4</button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  // 事件
  util.on('lay-on', {
    'test-load-1': function(){
      var loadIndex = layer.load(0);
      // 模拟关闭
      setTimeout(function(){
        layer.close(loadIndex)
      }, 3000);
    },
    'test-load-2': function(){
      var loadIndex = layer.load(1);
      // 模拟关闭
      setTimeout(function(){
        layer.close(loadIndex)
      }, 3000);
    },
    'test-load-3': function(){
      var loadIndex = layer.load(2);
      // 模拟关闭
      setTimeout(function(){
        layer.close(loadIndex)
      }, 3000);
    },
    'test-load-4': function(){
      var loadIndex = layer.msg('加载中', {
        icon: 16,
        shade: 0.01
      });;
      // 模拟关闭
      setTimeout(function(){
        layer.close(loadIndex)
      }, 3000);
    }
  })
});
</script>
  </textarea>
</pre>
<h3 id="demo-tips" lay-toc="{level: 3}">Tips 层</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-top">显示在上</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-right">显示在右</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-bottom">显示在下</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-left">显示在左</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-color">自定义背景色</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-more">允许多个 tips</button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  // 事件
  util.on('lay-on', {
    'test-tips-top': function(){
      layer.tips('向上', this, {
        tips: 1
      });
    },
    'test-tips-right': function(){
      layer.tips('默认向右', this);
    },
    'test-tips-bottom': function(){
      layer.tips('向下', this, {
        tips: 3
      });
    },
    'test-tips-left': function(){
      layer.tips('向左', this, {
        tips: 4
      });
    },
    'test-tips-color': function(){
      layer.tips('可自定义任意主题色', this, {
        tips: [1, '#16b777']
      });
    },
    'test-tips-more': function(){
      layer.tips('不会关闭之前的 tips', this, {
        tipsMore: true
      });
    }
  })
});
</script>
  </textarea>
</pre>
<h3 id="demo-other" lay-toc="{level: 3}">其他层</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-tab">tab 层</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-0">prompt - 单行文本框层</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-1">prompt - 密令输入框层</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-2">prompt - 多行文本框层</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-photos-one">photos - 单张图片层</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-photos">photos - 多张相册层</button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  // 事件
  util.on('lay-on', {
    'test-tips-tab': function(){
      layer.tab({
        area: ['600px', '300px'],
        tab: [{
          title: 'Title 1', 
          content: '<div style="padding: 16px;">tabs content 111</div>'
        }, {
          title: 'Title 2', 
          content: '<div style="padding: 16px;">tabs content 222</div>'
        }, {
          title: 'Title 3', 
          content: '<div style="padding: 16px;">tabs content 333</div>'
        }],
        shadeClose: true
      });
    },
    'test-tips-prompt-0': function(){
      layer.prompt({title: '请输入文本'}, function(value, index, elem){
        if(value === '') return elem.focus();
        layer.msg('获得：'+ util.escape(value)); // 显示 value
        // 关闭 prompt
        layer.close(index);
      });
    },
    'test-tips-prompt-1': function(){
      layer.prompt({title: '请输入密令', formType: 1}, function(value, index, elem){
        if(value === '') return elem.focus();
        layer.msg('获得：'+ util.escape(value)); // 显示 value
        // 关闭 prompt
        layer.close(index);
      });
    },
    'test-tips-prompt-2': function(){
      layer.prompt({title: '请输入文本', formType: 2}, function(value, index, elem){
        if(value === '') return elem.focus();
        layer.msg('获得：'+ util.escape(value)); // 显示 value
        // 关闭 prompt
        layer.close(index);
      });
    },
    'test-tips-photos-one': function(){
      layer.photos({
        photos: {
          "title": "Photos Demo",
          "start": 0,
          "data": [
            {
              "alt": "浩瀚宇宙",
              "pid": 5,
              "src": "https://unpkg.com/outeres/demo/outer-space.jpg",
            }
          ]
        },
        hideFooter: true // 是否隐藏底部栏 --- 2.8+
      });
    },
    'test-tips-photos': function(){
      layer.photos({
        photos: {
          "title": "Photos Demo",
          "start": 0,
          "data": [
            {
              "alt": "layer",
              "pid": 1,
              "src": "https://unpkg.com/outeres/demo/layer.png",
            },
            {
              "alt": "壁纸",
              "pid": 3,
              "src": "https://unpkg.com/outeres/demo/000.jpg",
            },
            {
              "alt": "浩瀚宇宙",
              "pid": 5,
              "src": "https://unpkg.com/outeres/demo/outer-space.jpg",
            }
          ]
        }
      });
    }
  })
});
</script>
  </textarea>
</pre>
<h3 id="demo-more" lay-toc="{level: 2, hot: true}">更多演示</h3>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出位置'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="t">上</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="r">右</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="b">下</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="l">左</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="rt">右上</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="rb">右下</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="lb">左下</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="lt">左上</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="auto">正中</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="">任意</button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  var $ = layui.$;
  // 事件
  util.on('lay-on', {
    'test-offset': function(){
      var othis = $(this);
      var offset = othis.data('offset');
      // 弹出位置
      layer.open({
        type: 1,
        offset: offset || ['200px', '280px'], // 详细可参考 offset 属性
        id: 'ID-demo-layer-offset-'+ offset, // 防止重复弹出
        content: '<div style="padding: 16px;">'+ othis.text() +'</div>',
        area: '240px',
        btn: '关闭全部',
        btnAlign: 'c', // 按钮居中
        shade: 0, // 不显示遮罩
        yes: function(){
          layer.closeAll();
        }
      });
    }
  });
});
</script>
  </textarea>
</pre>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出方向 <sup>2.8+</sup>'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<p>从页面四个边缘弹出（抽屉效果）：</p>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-t">从上往下</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-r">从右往左</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-b">从下往上</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-l">从左往右</button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  var $ = layui.$;
  // 事件
  util.on('lay-on', {
    'test-offset-t': function(){
      layer.open({
        type: 1,
        offset: 't',
        anim: 'slideDown', // 从上往下
        area: ['100%', '160px'],
        shade: 0.1,
        shadeClose: true,
        id: 'ID-demo-layer-direction-t',
        content: '<div style="padding: 16px;">任意 HTML 内容</div>'
      });
    },
    'test-offset-r': function(){
      layer.open({
        type: 1,
        offset: 'r',
        anim: 'slideLeft', // 从右往左
        area: ['320px', '100%'],
        shade: 0.1,
        shadeClose: true,
        id: 'ID-demo-layer-direction-r',
        content: '<div style="padding: 16px;">任意 HTML 内容</div>'
      });
    },
    'test-offset-b': function(){
      layer.open({
        type: 1,
        offset: 'b',
        anim: 'slideUp', // 从下往上
        area: ['100%', '160px'],
        shade: 0.1,
        shadeClose: true,
        id: 'ID-demo-layer-direction-b',
        content: '<div style="padding: 16px;">任意 HTML 内容</div>'
      });
    },
    'test-offset-l': function(){
      layer.open({
        type: 1,
        offset: 'l',
        anim: 'slideRight', // 从左往右
        area: ['320px', '100%'],
        shade: 0.1,
        shadeClose: true,
        id: 'ID-demo-layer-direction-l',
        content: '<div style="padding: 16px;">任意 HTML 内容</div>'
      });
    }
  });
});
</script>
  </textarea>
</pre>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '其他演示'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-max">
    最大化弹出
  </button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-scrollbar">
    弹出时屏蔽浏览器滚动条
  </button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-lockscreen">
    页面锁屏 <span class="layui-badge-dot"></span>
  </button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-shade">
    自定义遮罩颜色和透明度
  </button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-stack">
    <span class="layui-badge-dot"></span> 多窗口模式 + 层叠置顶 + Esc 关闭
  </button>
</div>
<style>
.class-demo-layer-lockscreen{background: url(https://unpkg.com/outeres@0.0.12/img/wallpaper/001.jpg) #16b777; background-size: cover; color: rgba(255,255,255,1);}
.class-demo-layer-lockscreen .layui-form{position: absolute; top: 50%; left: 50%; width: 300px; transform: translate(-50%, -50%);}
.class-demo-layer-lockscreen .layui-form > div{margin-bottom: 8px;}
.class-demo-layer-pin{width: 100%; height: 38px; padding: 0 8px; background-color: rgba(255,255,255,.8); border: none; border-radius: 3px; box-sizing: border-box;}
.class-demo-layer-lockscreen .layui-input-suffix{pointer-events: auto; background-color: rgba(0,0,0,.5); border-radius: 0 3px 3px 0;}
.class-demo-layer-lockscreen .layui-input-suffix .layui-icon-right{cursor: pointer; color: #fff;}
</style>
<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  var form = layui.form;
  var $ = layui.$;
  // 事件
  util.on('lay-on', {
    'test-more-max': function(){
      layer.open({
        type: 1,
        content: '<div style="padding: 16px;">任意 HTML 内容</div>',
        area: ['320px', '195px'], // 初始宽高
        maxmin: true,
        success: function(layero, index){
          layer.full(index); // 最大化
        }
      });
    },
    'test-more-scrollbar': function(){
      layer.open({
        content: '浏览器滚动条已暂时屏蔽，关闭弹层后自动恢复',
        scrollbar: false
      });
    },
    'test-more-lockscreen': function(){
      layer.open({
        type: 1,
        title: false, // 禁用标题栏
        closeBtn: false, // 禁用默认关闭按钮
        area: ['100%', '100%'],
        scrollbar: false, // 暂时屏蔽浏览器滚动条
        anim: -1, // 禁用弹出动画
        isOutAnim: false, // 禁用关闭动画
        id: 'ID-layer-demo-inst',
        skin: 'class-demo-layer-lockscreen', // className
        content: ['<div class="layui-form">',
          '<div class="layui-input-wrap">',
            '<input type="password" class="class-demo-layer-pin" lay-affix="eye">',
            '<div class="layui-input-suffix">',
              '<i class="layui-icon layui-icon-right" id="ID-layer-demo-unlock"></i>',
            '</div>',
          '</div>',
          '<div>输入 111111 后回车，即可退出锁屏示例</div>',
        '</div>'].join(''),
        success: function(layero, index){
          var input = layero.find('input');
          var PASS = '111111';
          
          form.render(); // 表单组件渲染
          input.focus();
          // 点击解锁按钮
          var elemUnlock = layero.find('#ID-layer-demo-unlock');
          elemUnlock.on('click', function(){
            if($.trim(input[0].value) === PASS){
              layer.close(index);
              layer.closeLast('dialog'); // 关闭最新打开的信息框
            } else {
              layer.msg('锁屏密码输入有误', {offset: '16px', anim: 'slideDown'})
              input.focus();
            }
          });
          // 回车
          input.on('keyup', function(e){
            var elem = this;
            var keyCode = e.keyCode;
            if(keyCode === 13){
              elemUnlock.trigger('click');
            }
          });
        }
      })
    },
    'test-more-shade': function(){
      layer.open({
        type: 1,
        content: '<div style="padding: 16px;">任意 HTML 内容</div>',
        area: ['320px', '195px'], // 初始宽高
        shade: [0.9, '#000'],
        shadeClose: true // 点击遮罩区域，关闭弹层
      });
    },
    'test-more-stack': function(){
      var that = this;
      // 多窗口模式 + 层叠置顶 + Esc 关闭
      layer.open({
        type: 1,
        title: '当你选择该窗体时，即会在最顶端',
        area: ['390px', '260px'],
        shade: 0,
        maxmin: true,
        offset: [ // 为了便于演示，此处采用随机坐标
          Math.random()*($(window).height()-300),
          Math.random()*($(window).width()-390)
        ],
        content: '<div style="padding: 16px;">内容标记：'+ new Date().getTime() + '，按 ESC 键可关闭。<br><br>当你的页面有很多很多 layer 窗口，你需要像 Window 窗体那样，点击某个窗口，该窗体就置顶在上面，那么 layer.setTop() 可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优。</div>',   
        btn: ['继续弹出', '全部关闭'], //只是为了演示
        yes: function(){
          $(that).click(); 
        },
        btn2: function(){
          layer.closeAll();
        },
        zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
        success: function(layero, index){
          layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
          
          // 记录索引，以便按 esc 键关闭。事件见代码最末尾处。
          layer.escIndex = layer.escIndex || [];
          layer.escIndex.unshift(index);
          // 选中当前层时，将当前层索引放置在首位
          layero.on('mousedown', function(){
            var _index = layer.escIndex.indexOf(index);
            if(_index !== -1){
              layer.escIndex.splice(_index, 1); //删除原有索引
            }
            layer.escIndex.unshift(index); //将索引插入到数组首位
          });
        },
        end: function(){
          //更新索引
          if(typeof layer.escIndex === 'object'){
            layer.escIndex.splice(0, 1);
          }
        }
      });
    }
  });
  // 多窗口模式 - esc 键
  $(document).on('keyup', function(e){
    if(e.keyCode === 27){
      layer.close(layer.escIndex ? layer.escIndex[0] : 0);
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-skin" lay-toc="{level: 2, hot: true}">主题风格</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-alert">
    墨绿与深蓝主题
  </button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10">
    Windows 10 风格信息框 <span class="layui-badge-dot"></span>
  </button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10-page">
    Win10 风格页面层 <span class="layui-badge-dot"></span>
  </button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-custom">自定义任意主题</button>
</div>
<style>
/* 自定义其他任意主题  */
.class-layer-demo-custom .layui-layer-title{background-color: #EDEFF2;}
.class-layer-demo-custom .layui-layer-btn{padding: 5px 10px 10px;}
.class-layer-demo-custom .layui-layer-btn a{background: #fff; border-color: #E9E7E7; color: #333;}
.class-layer-demo-custom .layui-layer-btn .layui-layer-btn0{border-color: #FA584D; background-color: #FA584D; color: #fff;}
</style>
<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  // 事件
  util.on('lay-on', {
    'test-skin-alert': function(){
      layer.alert('墨绿风格，点击继续确认看深蓝', {
        skin: 'layui-layer-molv' // 样式类名
      }, function(){
        layer.alert('深蓝', {
          skin: 'layui-layer-lan'
        });
      });
    },
    'test-skin-win10': function(){
      layer.alert('Windows 10 风格主题', {
        skin: 'layui-layer-win10', // 2.8+
        shade: 0.01,
        btn: ['确定', '取消']
      })
    },
    'test-skin-win10-page': function(){
      // 此处以一个简单的 Win10 风格记事本为例
      layer.open({
        type: 1, // 页面层类型
        skin: 'layui-layer-win10', // 2.8+
        shade: 0.01,
        area: ['50%', '60%'],
        maxmin: true,
        title: '*无标题 - 记事本',
        content: [
          '<div style="padding: 0 8px; height: 20px; line-height: 20px; border-bottom: 1px solid #F0F0F0; box-sizing: border-box; font-size: 12px;">',
            // 自定义菜单，此处仅作样式演示，具体功能可自主实现
            [
              '<a href="javascript:;">文件(F)</a>',
              '<a href="javascript:;" >编辑(E)</a> ',
              '<a href="javascript:;" >格式(O)</a> ',
              '<a href="javascript:;" >查看(V)</a> ',
              '<a href="javascript:;" >帮助(H)</a> ',
            ].join('&nbsp;&nbsp;&nbsp;'),
          '</div>',
          '&lt;textarea style="position: absolute; top: 20px; width: 100%; height: calc(100% - 20px); padding: 6px; border: none; resize: none; overflow-y: scroll; box-sizing: border-box;">&lt;/textarea>'
        ].join('')
      });
    },
    'test-skin-custom': function(){
      layer.alert('自定义其他任意主题', {
        skin: 'class-layer-demo-custom'
      })
    }
  })
});
</script>
</script>
  </textarea>
</pre>
<h3>小贴士</h3>
<blockquote class="layui-elem-quote">
<p>事实上 layer 丰富的基础属性，可足够让您的弹出层变得千变万化，为了避免占用太多篇幅，就不做过多演示了。</p>
</blockquote class="layui-elem-quote">

</div>
<h2 id="api" lay-toc="{hot: true, bold: true}">API</h2>
<table class="layui-table">
<thead>
<tr>
<th>API</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var layer = layui.layer</td>
<td>获得 <code>layer</code> 模块。</td>
</tr>
<tr>
<td>弹出 :</td>
<td>-</td>
</tr>
<tr>
<td><a href="index.html#open">layer.open(options)</a></td>
<td>打开弹层，核心方法。下述所有弹出方式均为该方法的二次封装</td>
</tr>
<tr>
<td><a href="index.html#alert">layer.alert(content, options, yes)</a></td>
<td>弹出 <code>dialog</code> 类型信息框。</td>
</tr>
<tr>
<td><a href="index.html#confirm">layer.confirm(content, options, yes, cancel)</a></td>
<td>弹出 <code>dialog</code> 类型询问框。</td>
</tr>
<tr>
<td><a href="index.html#msg">layer.msg(content, options, end)</a></td>
<td>弹出 <code>dialog</code> 类型提示框。</td>
</tr>
<tr>
<td><a href="index.html#load">layer.load(icon, options)</a></td>
<td>弹出 <code>loading</code> 类型加载层。</td>
</tr>
<tr>
<td><a href="index.html#tips">layer.tips(content, elem, options)</a></td>
<td>弹出 <code>tips</code> 类型贴士层。</td>
</tr>
<tr>
<td><a href="index.html#prompt">layer.prompt(options, yes)</a></td>
<td>弹出 <code>page</code> 类型输入框层。</td>
</tr>
<tr>
<td><a href="index.html#photos">layer.photos(options)</a></td>
<td>弹出 <code>page</code> 类型图片层。</td>
</tr>
<tr>
<td><a href="index.html#tab">layer.tab(options)</a></td>
<td>弹出 <code>page</code> 类型标签页层。</td>
</tr>
<tr>
<td>关闭 :</td>
<td>-</td>
</tr>
<tr>
<td><a href="index.html#close">layer.close(index)</a></td>
<td>关闭对应的层，核心方法。</td>
</tr>
<tr>
<td><a href="index.html#closeAll">layer.closeAll(type)</a></td>
<td>关闭所有对应类型的层。</td>
</tr>
<tr>
<td><a href="index.html#closeLast">layer.closeLast(type)</a> <sup>2.8+</sup></td>
<td>关闭最近打开的对应类型的层。</td>
</tr>
<tr>
<td>其他 :</td>
<td>-</td>
</tr>
<tr>
<td><a href="index.html#config">layer.config(options)</a></td>
<td>全局配置默认属性。</td>
</tr>
<tr>
<td><a href="index.html#ready">layer.ready(callback)</a></td>
<td>样式初始化就绪。</td>
</tr>
<tr>
<td><a href="index.html#set-style">layer.style(index, css)</a></td>
<td>重新设置弹层样式。</td>
</tr>
<tr>
<td><a href="index.html#set-title">layer.title(title, index)</a></td>
<td>设置弹层的标题。</td>
</tr>
<tr>
<td><a href="index.html#getChildFrame">layer.getChildFrame(selector, index)</a></td>
<td>获取 iframe 页中的元素。</td>
</tr>
<tr>
<td><a href="index.html#getFrameIndex">layer.getFrameIndex(window.name)</a></td>
<td>在 iframe 页中获取弹层索引。</td>
</tr>
<tr>
<td><a href="index.html#iframeAuto">layer.iframeAuto(index)</a></td>
<td>设置 iframe 层高度自适应。</td>
</tr>
<tr>
<td><a href="index.html#iframeSrc">layer.iframeSrc(index, url)</a></td>
<td>重新设置 iframe 层 URL。</td>
</tr>
<tr>
<td>layer.index</td>
<td>获取最新弹出层的索引</td>
</tr>
<tr>
<td>layer.zIndex</td>
<td>获取最新弹出层的层叠顺序</td>
</tr>
<tr>
<td><a href="index.html#setTop">layer.setTop(layero)</a></td>
<td>将对应弹层的层叠顺序为置顶。</td>
</tr>
<tr>
<td><a href="index.html#full">layer.full(index)</a></td>
<td>设置弹层最大化尺寸。</td>
</tr>
<tr>
<td><a href="index.html#min">layer.min(index)</a></td>
<td>设置弹层最小化尺寸。</td>
</tr>
<tr>
<td><a href="index.html#restore">layer.restore(index)</a></td>
<td>还原弹层尺寸。</td>
</tr>
</tbody>
</table class="layui-table">
<h2 id="open" lay-toc="{level: 2}">打开弹层</h2>
<p><code>layer.open(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>打开弹层的核心方法，其他不同类型的弹出方法均为该方法的二次封装。</p>
<pre><code class="layui-code">// 该方法返回当前层的唯一索引，以便其他方法对该弹层进行相关操作
var index = layer.open({
  type: 1, // page 层类型，其他类型详见「基础属性」
  content: '&lt;div style=&quot;padding: 16px;&quot;&gt;test&lt;/div&gt;'
});
</code></pre>
<h2 id="options" lay-toc="{level: 2, hot: true}">基础属性</h2>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="100">
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
      <th>类型</th>
      <th>默认值</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>type</td>
<td>
<p>弹层类型。 可选值有：</p>
<ul>
<li><code>0</code> dialog 信息框（默认），<em class="layui-text-em">同时只能存在一个层</em></li>
<li><code>1</code> page 页面层，<em class="layui-text-em">可同时存在多个层</em></li>
<li><code>2</code> iframe 内联框架层，<em class="layui-text-em">可同时存在多个层</em></li>
<li><code>3</code> loading 加载层，<em class="layui-text-em">同时只能存在一个层</em></li>
<li><code>4</code> tips 贴士层，<em class="layui-text-em">可配置同时存在多个层</em></li>
</ul>
<p><code>layer</code> 弹层由以上 5 种类型构成。 不同的类型代表不同的弹出形态，<code>layer</code> 提供的所有的弹出方式均由此衍生。</p>
</td>
<td>number</td>
<td>
<p><code>0</code></p>
</td>
    </tr>
    <tr>
<td>title</td>
<td>
<p>弹层标题。其值支持以下可选类型：</p>
<ul>
<li>若为 <code>string</code> 类型 : 则表示为弹层的标题文本，如：</li>
</ul>
<pre><code class="layui-code">title: '标题'
</code></pre>
<ul>
<li>若为 <code>array</code> 类型 : 则可设置标题文本和标题栏 CSS 样式：</li>
</ul>
<pre><code class="layui-code"> title: ['标题', 'font-size: 18px;']
</code></pre>
<ul>
<li>若为 <code>boolean</code> 类型 : 则可设为 <code>false</code> 不显示标题栏。</li>
</ul>
<pre><code class="layui-code">title: false // 不显示标题栏
</code></pre>
</td>
<td>string<br>array<br>boolean</td>
<td>
<p><code>信息</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.content">content</a></p>
</td>
<td colspan="3">
<div id="options.content" lay-pid="options" class="ws-anchor">
<p>弹层内容。 可传入的值比较灵活，支持以下使用场景：</p>
<ul>
<li>若 <code>type: 1</code>（页面层）: 则 <code>content</code> 可传入值如下：</li>
</ul>
<pre><code class="layui-code">// 普通字符
layer.open({
  type: 1, 
  content: '传入任意文本或 HTML'
});
// 捕获页面已存在的 DOM 元素或 jQuery 对象
layer.open({
  type: 1,
  content: $('#id') // 捕获层
});
</code></pre>
<p>注意： 若采用捕获层，则捕获的元素必须存放在 <code>&lt;body&gt;</code> 根节点下，否则可能被父级容器的相对定位所影响。</p>
</div>
<ul>
<li>若 <code>type: 2</code>（iframe 层）: 则 <code>content</code> 可传入值如下：</li>
</ul>
<pre><code class="layui-code">// iframe URL
layer.open({
  type: 2, 
  content: 'http://cn.bing.com' // URL
}); 
// 是否屏蔽 iframe 滚动条
layer.open({
  type: 2, 
  // 数组第二个成员设为 no，即屏蔽 iframe 滚动条
  content: ['http://cn.bing.com', 'yes']
}); 
</code></pre>
<ul>
<li>若为其他弹层类型，传入普通字符即可。</li>
</ul>
<p>相关效果可参考：<a href="index.html#demo-page">#示例</a></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.area">area</a></p>
</td>
<td>
<div id="options.area" lay-pid="options" class="ws-anchor">  
设置弹层的宽高，其值支持以下可选类型：
</div>
<ul>
<li>若为 <code>array</code> 类型，则可同时设置宽高
<ul>
<li><code>area: ['520px', '320px']</code> 固定宽度和高度</li>
<li><code>area: ['auto', '320px']</code> 宽度自动，高度固定</li>
<li><code>area: ['520px', 'auto']</code> 宽度固定，高度自动</li>
</ul>
</li>
<li>若为 <code>string</code> 类型，则可定义宽度和宽高均自适应：
<ul>
<li><code>area: '520px'</code> 宽度固定，高度自适应</li>
<li><code>area: 'auto'</code> 宽度和高度均自适应</li>
</ul>
</li>
</ul>
</td>
<td>array<br>string</td>
<td>
<p><code>auto</code></p>
</td>
    </tr>
    <tr>
<td>maxWidth</td>
<td>
<p>弹层的最大宽度。当 <code>area</code> 属性值为默认的 <code>auto'</code> 时有效。</p>
</td>
<td>number</td>
<td>
<p><code>360</code></p>
</td>
    </tr>
    <tr>
<td>maxHeight</td>
<td>
<p>弹层的最大高度。当 <code>area</code> 属设置高度自适应时有效。</p>
</td>
<td>number</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.offset">offset</a></p>
</td>
<td>
<div id="options.offset" lay-pid="options" class="ws-anchor">  
弹层的偏移坐标。 支持以下可选值：
</div>  
<ul>
<li><code>offset: 'auto'</code> 坐标始终垂直水平居中</li>
<li><code>offset: '16px'</code> 只设置垂直坐标，水平保持居中</li>
<li><code>offset: ['16px', '16px']</code> 设置垂直和水平坐标</li>
<li><code>offset: 't'</code> 上边缘</li>
<li><code>offset: 'r'</code> 右边缘</li>
<li><code>offset: 'b'</code> 下边缘</li>
<li><code>offset: 'l'</code> 左边缘</li>
<li><code>offset: 'rt'</code> 右上角</li>
<li><code>offset: 'rb'</code> 右下角</li>
<li><code>offset: 'lt'</code> 左上角</li>
<li><code>offset: 'lb'</code> 左下角</li>
</ul>
<p>当设置边缘坐标时，可配合 <code>anim</code> 属性实现抽屉弹出效果。</p>
</td>
<td>string<br>array</td>
<td>
<p><code>auto</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.anim">anim</a></p>
</td>
<td>
<div id="options.anim" lay-pid="options" class="ws-anchor">
弹层的出场动画。支持以下可选值：
</div>
<ul>
<li><code>anim: 0</code> 平滑放大。默认</li>
<li><code>anim: 1</code> 从上掉落</li>
<li><code>anim: 2</code> 从最底部往上滑入</li>
<li><code>anim: 3</code> 从左滑入</li>
<li><code>anim: 4</code> 从左翻滚</li>
<li><code>anim: 5</code> 渐显</li>
<li><code>anim: 6</code> 抖动</li>
</ul>
<p>边缘抽屉动画 <sup>2.8+</sup>：</p>
<ul>
<li><code>anim: 'slideDown'</code> 从上边缘往下</li>
<li><code>anim: 'slideLeft'</code> 从右边缘往左</li>
<li><code>anim: 'slideUp'</code> 从下边缘往上</li>
<li><code>anim: 'slideRight'</code>  从左边缘往右</li>
</ul>
<p>抽屉动画一般配合 <code>offset</code> 属性实现边缘弹出。<a href="index.html#demo-more">#详见示例</a></p>
</td>
<td>number<br>string</td>
<td>
<p><code>0</code></p>
</td>
    </tr>
    <tr>
<td>isOutAnim</td>
<td>
<p>是否开启弹层关闭时的动画。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>maxmin</td>
<td>
<p>是否开启标题栏的最大化和最小化图标。</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.closeBtn">closeBtn</a></p>
</td>
<td>
<div id="options.closeBtn" lay-pid="options" class="ws-anchor">   
是否开启标题栏的关闭图标，或设置关闭图标风格。
</div>
<ul>
<li><code>closeBtn: 0</code> 不显示关闭图标</li>
<li><code>closeBtn: 1</code> 关闭图标默认风格</li>
<li><code>closeBtn: 2</code> 关闭图标风格二</li>
</ul>
</td>
<td>number</td>
<td>
<p><code>1</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.icon">icon</a></p>
</td>
<td>
<div id="options.icon" lay-pid="options" class="ws-anchor">
提示图标。 信息框和加载层的私有参数。
</div>
<ul>
<li>若为信息框，支持传入 <code>0-6</code> 的可选值。<br>默认为 <code>-1</code>，即不显示图标。</li>
<li>若为加载层，支持传入 <code>0-2</code> 的可选值</li>
</ul>
<pre><code class="layui-code">// eg1
layer.alert('成功提示', {icon: 1});
// eg2
layer.msg('开心表情', {icon: 6});
// eg3
layer.load(1); // 加载层风格一
</code></pre>
</td>
<td>number</td>
<td>
<p><code>-1</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.btn">btn</a></p>
</td>
<td>
<div id="options.btn" lay-pid="options" class="ws-anchor">
自定义按钮。 页面层默认不开启。 按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如：
</div>
<pre><code class="layui-code">// eg1       
layer.confirm('询问框？', {
  btn: ['按钮1', '按钮2', '按钮3']
});
// eg2
layer.open({
  content: 'test',
  btn: ['按钮1', '按钮2', '按钮3'],
  // 按钮1 的回调
  btn1: function(index, layero, that){},
  btn2: function(index, layero, that){
    // 按钮2 的回调
    // return false // 点击该按钮后不关闭弹层
  },
  btn3: function(index, layero, that){
    // 按钮3 的回调
    // return false // 点击该按钮后不关闭弹层
  }
});
</code></pre>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.btnAlign">btnAlign</a></p>
</td>
<td>
<div id="options.btnAlign" lay-pid="options" class="ws-anchor">
按钮水平对其方式。支持以下可选值：
</div>
<ul>
<li><code>btnAlign: 'l'</code> 按钮左对齐</li>
<li><code>btnAlign: 'c'</code> 按钮水平居中对齐</li>
<li><code>btnAlign: 'r'</code> 按钮右对齐。默认值，不用设置</li>
</ul>
</td>
<td>string</td>
<td>
<p><code>r</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.skin">skin</a></p>
</td>
<td>
<div id="options.skin" lay-pid="options" class="ws-anchor">
弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题：
</div>
<ul>
<li><code>layui-layer-molv</code> 墨绿主题</li>
<li><code>layui-layer-lan</code> 深蓝主题</li>
<li><code>layui-layer-win10</code> Windows 10 主题 <sup>2.8+</sup></li>
</ul>
<p>还可传入其他任意 className 来自定义主题。 参考：<a href="index.html#demo-skin">#示例</a></p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.shade">shade</a></p>
</td>
<td>
<div id="options.shade" lay-pid="options" class="ws-anchor">
弹层的遮罩。 支持以下写法：
</div>
<ul>
<li><code>shade: 0.3</code> 设置遮罩深色背景的透明度</li>
<li><code>shade: [0.3, '#FFF']</code> 设置遮罩透明度和颜色值</li>
<li><code>shade: 0</code> 不显示遮罩</li>
</ul>
</td>
<td>number<br>array</td>
<td>
<p><code>0.3</code></p>
</td>
    </tr>
    <tr>
<td>shadeClose</td>
<td>
<p>是否点击遮罩时关闭弹层。当遮罩存在时有效。</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>id</td>
<td>
<p>弹层的唯一索引值。 一般用于页面层或 iframe 层弹出时的状态识别，设置该属性可防止弹层的重复弹出。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>hideOnClose <sup>2.8.3+</sup></td>
<td>
<p>关闭弹层时，是否将弹层设置为隐藏状态（而非移除），当再次打开，直接显示原来的弹层。 若设为 <code>true</code>，则必须同时设置 <code>id</code> 属性方可有效。</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>time</td>
<td>
<p>弹层自动关闭所需的毫秒数。 如 <code>time: 3000</code> ，即代表 3 秒后自动关闭。 提示框、加载层、Tips 层三种弹出模式默认开启。</p>
</td>
<td>number</td>
<td>
<p><code>0</code></p>
</td>
    </tr>
    <tr>
<td>fixed</td>
<td>
<p>弹层是否固定定位，即始终显示在页面可视区域。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>zIndex</td>
<td>
<p>弹层的初始层叠顺序值。</p>
</td>
<td>number</td>
<td>
<p><code>19891014</code></p>
</td>
    </tr>
    <tr>
<td>resize</td>
<td>
<p>是否允许拖拽弹层右下角拉伸尺寸。 该属性对加载层和 tips 层无效。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>scrollbar</td>
<td>
<p>打开弹层时，是否允许浏览器出现滚动条。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>minStack <sup>2.6+</sup></td>
<td>
<p>点击标题栏的最小化时，是否从页面左下角堆叠排列。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>removeFocus <sup>2.8+</sup></td>
<td>
<p>是否移除弹层触发元素的焦点，避免按回车键时重复弹出。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>move</td>
<td>
<p>绑定弹层的拖拽元素。 默认为触发弹层的标题栏进行拖拽。也可以设置 <code>move: false</code> 禁止拖拽。
用法参考：<a href="index.html#demo-page">#示例</a></p>
</td>
<td>string<br>DOM<br>boolean</td>
<td>-</td>
    </tr>
    <tr>
<td>moveOut</td>
<td>
<p>否允许拖拽到窗口外</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>tips</td>
<td>
<p>设置 tips 层的吸附位置和背景色，tips 层的私有属性。</p>
<ul>
<li>若为 <code>number</code> 类型，则支持 <code>1-4</code> 的可选值，分别代表<em class="layui-text-em">上右下左</em>的吸附位置。如： <code>tips: 1</code></li>
<li>若为 <code>array</code> 类型，则支持设置吸附位置和背景色，如：</li>
</ul>
<pre><code class="layui-code">tips: [1, '#000'] // 吸附在上的深色贴士层
</code></pre>
</td>
<td>number<br>array</td>
<td>
<p><code>2</code></p>
</td>
    </tr>
    <tr>
<td>tipsMore</td>
<td>
<p>是否允许同时存在多个 tips 层，即不销毁上一个 tips。</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td colspan="4" style="text-align: center"> 
<div id="options.callback" lay-pid="options" class="ws-anchor">
<p><a href="index.html#options.callback">回调函数</a></p>
</div>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.success">success</a></p>
</td>
<td colspan="3">
<div id="options.success" class="ws-anchor">
打开弹层成功后的回调函数。返回的参数如下：
</div>
<pre><code class="layui-code">layer.open({
  type: 1,
  content: '内容',
  success: function(layero, index, that){
    // 弹层的最外层元素的 jQuery 对象
    console.log(layero);
    // 弹层的索引值
    console.log(index);
    // 弹层内部原型链中的 this --- 2.8+
    console.log(that);
  }
});   
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.yes">yes</a></p>
</td>
<td colspan="3">
<div id="options.yes" lay-pid="options" class="ws-anchor">
<p>点击「确定」按钮的回调函数。返回的参数同 <code>success</code></p>
</div>
<pre><code class="layui-code">layer.open({
  content: '内容',
  yes: function(index, layero, that){
    // do something
    layer.close(index); // 关闭弹层
  }
});  
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.cancel">cancel</a></p>
</td>
<td colspan="3">
<div id="options.cancel" lay-pid="options" class="ws-anchor">
点击标题栏关闭按钮的回调函数。返回的参数同 `success`
</div>
<pre><code class="layui-code">layer.open({
  content: '内容',
  cancel: function(index, layero, that){
    if(confirm('确定要关闭么')){
      layer.close(index);
    }
    return false; // 阻止默认关闭行为
  }
});  
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.end">end</a></p>
</td>
<td colspan="3">
<div id="options.end" lay-pid="options" class="ws-anchor">
弹层被关闭且销毁后的回调函数。
</div>
<pre><code class="layui-code">layer.open({
  content: '内容',
  end: function(){
    console.log('弹层已被移除');
  }
});  
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.moveEnd">moveEnd</a></p>
</td>
<td colspan="3">
<div id="options.moveEnd" lay-pid="options" class="ws-anchor">
弹层拖拽完毕后的回调函数。
</div>
<pre><code class="layui-code">layer.open({
  type: 1,
  content: '内容',
  moveEnd: function(layero){
    console.log('拖拽完毕');
  }
});  
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.resizing">resizing</a></p>
</td>
<td colspan="3">
<div id="options.resizing" lay-pid="options" class="ws-anchor">
弹层拉伸过程中的回调函数
</div>
<pre><code class="layui-code">layer.open({
  type: 1,
  content: '内容',
  resizing: function(layero){
    console.log('拉伸中');
  }
});  
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.full">full</a></p>
</td>
<td colspan="3">
<div id="options.full" lay-pid="options" class="ws-anchor">
<p>弹层最大化后的回调函数。返回的参数同 <code>success</code></p>
</div>
<pre><code class="layui-code">layer.open({
  type: 1,
  content: '内容',
  full: function(layero, index, that){
    console.log('弹层已最大化');
  }
});  
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.min">min</a></p>
</td>
<td colspan="3">
<div id="options.min" lay-pid="options" class="ws-anchor">
<p>弹层最小化后的回调函数。返回的参数同 <code>success</code></p>
</div>
<pre><code class="layui-code">layer.open({
  type: 1,
  content: '内容',
  min: function(layero, index, that){
    // do something
    // return false; // 阻止默认最小化
  }
});  
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.restore">restore</a></p>
</td>
<td colspan="3">
<div id="options.restore" lay-pid="options" class="ws-anchor">
弹层被还原后的回调函数。返回的参数同 `success`
</div>
<pre><code class="layui-code">layer.open({
  type: 1,
  content: '内容',
  restore: function(layero, index, that){
    console.log('弹层已还原');
  }
});  
</code></pre>
</td>
    </tr>
  </tbody>
</table>
</div>
<h2 id="alert" lay-pid="api" class="ws-anchor ws-bold">弹出信息框</h2>
<p><code>layer.alert(content, options, yes);</code></p>
<ul>
<li>参数 <code>content</code> : 弹出内容</li>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
<li>参数 <code>yes</code> : 点击确定后的回调函数</li>
</ul>
<p>该方法用于弹出 <code>dialog</code> 类型信息框（<code>type: 0</code>），参数自动向左补位。</p>
<pre><code class="layui-code">// eg1
layer.alert('一个简单的信息框');
// eg2
layer.alert('开启图标', {icon: 1}, function(index){
  // do something
  // …
  layer.close(index);
});
// eg3
layer.alert('不开启图标', function(index){
  // do something
  // …
  layer.close(index);
});  
</code></pre>
<h2 id="confirm" lay-pid="api" class="ws-anchor ws-bold">弹出询问框</h2>
<p><code>layer.confirm(content, options, yes, cancel);</code></p>
<ul>
<li>参数 <code>content</code> : 弹出内容</li>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
<li>参数 <code>yes</code> : 点击确定后的回调函数</li>
<li>参数 <code>cancel</code> : 点击第二个按钮（默认「取消」）后的回调函数</li>
</ul>
<p>该方法用于弹出 <code>dialog</code> 类型询问框（<code>type: 0</code>），参数自动向左补位。</p>
<pre><code class="layui-code">// eg1
layer.confirm('确定吗?', {icon: 3, title:'提示'}, function(index){
  // do something
  // …
  layer.close(index);
});
// eg2
layer.confirm('确定吗?', function(index){
  // do something
  // …
  layer.close(index);
});  
</code></pre>
<h2 id="msg" lay-pid="api" class="ws-anchor ws-bold">弹出提示框</h2>
<p><code>layer.msg(content, options, end);</code></p>
<ul>
<li>参数 <code>content</code> : 弹出内容</li>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
<li>参数 <code>end</code> : 提示框关闭后的回调函数</li>
</ul>
<p>该方法用于弹出 <code>dialog</code> 类型提示框（<code>type: 0</code>），默认 <code>3</code> 秒后自动关闭。参数自动向左补位。</p>
<pre><code class="layui-code">// eg1
layer.msg('普通提示');
// eg2
layer.msg('带 icon 的提示', {icon: 6}); 
// eg3
layer.msg('关闭后想做些什么', function(){
  // do something
}); 
// eg
layer.msg('提示框', {
  icon: 1,
  time: 2000 // 设置 2 秒后自动关闭
}, function(){
  // do something
});   
</code></pre>
<h2 id="load" lay-pid="api" class="ws-anchor ws-bold">弹出加载层</h2>
<p><code>layer.load(icon, options);</code></p>
<ul>
<li>参数 <code>icon</code> : 加载图标风格，支持 <code>0-2</code> 可选值</li>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>该方法用于弹出 <code>load</code> 类型加载层（<code>type: 3</code>）。</p>
<pre><code class="layui-code">// eg1
var index = layer.load(); // 默认加载图标风格
// eg2
var index = layer.load(1); // 加载图标风格 1
// eg3
var index = layer.load(2, {time: 10*1000}); // 加载图标风格，并设置最长等待 10 秒
// 关闭加载层
layer.close(index);     
</code></pre>
<h2 id="tips" lay-pid="api" class="ws-anchor ws-bold">弹出贴士层</h2>
<p><code>layer.tips(content, elem, options);</code></p>
<ul>
<li>参数 <code>content</code> : 弹出内容</li>
<li>参数 <code>elem</code> : 吸附的目标元素选择器或对象</li>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>该方法用于弹出 <code>tips</code> 类型贴士层（<code>type: 4</code>），默认 <code>3</code> 秒后自动关闭。</p>
<pre><code class="layui-code">// eg1
layer.tips('小贴士', '#id');
// eg2
$('#id').on('click', function(){
  var elem = this;
  layer.tips('小贴士', elem); //在元素的事件回调体中，follow直接赋予this即可
});
// eg3
layer.tips('显示在目标元素上方', '#id', {
  tips: 1 // 支持 1-4 可选值，更多详见基础属性中的 tips 介绍
});
</code></pre>
<h2 id="prompt" lay-pid="api" class="ws-anchor ws-bold">弹出输入框</h2>
<p><code>layer.prompt(options, yes);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。除了支持 <a href="index.html#options">基础属性</a> 之外，还支持下表私有属性：</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>私有属性</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>formType</td>
<td>输入框类型。支持以下可选值：<ul><li> <code>0</code> 文本输入框 </li><li> <code>1</code> 密令输入框 </li><li> <code>2</code> 多行文本输入框 </li></ul></td>
<td>number</td>
<td><code>0</code></td>
</tr>
<tr>
<td>value</td>
<td>输入框初始值</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>maxlength</td>
<td>可输入的最大字符长度</td>
<td>number</td>
<td><code>500</code></td>
</tr>
<tr>
<td>placeholder</td>
<td>输入框内容为空时的占位符</td>
<td>string</td>
<td>-</td>
</tr>
</tbody>
</table class="layui-table">
<ul>
<li>参数 <code>yes</code> : 点击确定后的回调函数</li>
</ul>
<p>该方法用于弹出输入框层，基于 <code>type: 1</code>（即 <code>page</code> 层）的自定义内容。 效果参考： <a href="index.html#demo-other">#示例</a></p>
<pre><code class="layui-code">// eg1
layer.prompt(function(value, index, elem){
  alert(value); // 得到 value
  layer.close(index); // 关闭层
});
 
// eg2
layer.prompt({
  formType: 2,
  value: '初始值',
  title: '请输入值',
  area: ['800px', '350px'] // 自定义文本域宽高
}, function(value, index, elem){
  alert(value); // 得到 value
  layer.close(index); // 关闭层
});
</code></pre>
<h2 id="photos" lay-pid="api" class="ws-anchor ws-bold">弹出图片层</h2>
<p><code>layer.photos(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。除了支持 <a href="index.html#options">基础属性</a> 之外，还支持下表私有属性：</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>私有属性</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>photos</td>
<td>图片层的数据源，格式详见下述示例。</td>
<td>object</td>
<td>-</td>
</tr>
<tr>
<td>tab</td>
<td>图片层切换后的回调函数，返回的参数见下述示例</td>
<td>function</td>
<td>-</td>
</tr>
</tbody>
</table class="layui-table">
<p>该方法用于弹出图片层，基于 <code>type: 1</code>（即 <code>page</code> 层）的自定义内容。</p>
<p><strong>用法一：直接赋值图片数据</strong>。 效果参考： <a href="index.html#demo-other">#示例</a></p>
<pre><code class="layui-code">layer.photos({
  photos: { // 图片层的数据源
    &quot;title&quot;: &quot;&quot;, // 相册标题
    &quot;id&quot;: 123, // 相册 id
    &quot;start&quot;: 0, // 初始显示的图片序号，默认 0
    &quot;data&quot;: [   // 相册包含的图片，数组格式
      {
        &quot;alt&quot;: &quot;图片名&quot;,
        &quot;pid&quot;: 666, // 图片id
        &quot;src&quot;: &quot;&quot;, // 原图地址
        &quot;thumb&quot;: &quot;&quot; // 缩略图地址
      },
      // …
    ]
  },
  tab: function(data, layero){ // 图片层切换后的回调
    console.log(data); // 当前图片数据信息
    console.log(layero); // 图片层的容器对象
  }
});
</code></pre>
<p><strong>用法二：绑定页面图片元素</strong>。点击图片时，弹出对应的图片层。</p>
<pre class="layui-code" lay-options="{preview: true, layout: ['code', 'preview'], tools: ['full']}">
  <textarea>
<style>
.class-photos-demo img{width: 160px; height: 100px; cursor: pointer;}
</style>
<div id="ID-photos-demo" class="class-photos-demo">
  <!-- <img src="缩略图" layer-src="大图地址" layer-pid="图片id，可不写" alt="图片名"> -->
  <img src="https://unpkg.com/outeres/demo/layer.png" layer-src="https://unpkg.com/outeres/demo/layer.png" layer-pid="" alt="layer">
  <img src="https://unpkg.com/outeres/demo/000.jpg" layer-src="https://unpkg.com/outeres/demo/000.jpg" layer-pid="" alt="壁纸">
  <img src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-pid="" alt="星空如此深邃">  
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  // 图片层
  layer.photos({
    photos: '#ID-photos-demo'
  }); 
});
</script>
  </textarea>
</pre>
<h2 id="tab" lay-pid="api" class="ws-anchor ws-bold">弹出标签层</h2>
<p><code>layer.tab(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。除了支持 <a href="index.html#options">基础属性</a> 之外，还支持下表私有属性：</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>私有属性</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>tab</td>
<td>标签层的数据源，格式详见下述示例。</td>
<td>array</td>
<td>-</td>
</tr>
</tbody>
</table class="layui-table">
<p>该方法用于弹出标签层，基于 <code>type: 1</code>（即 <code>page</code> 层）的自定义内容。 效果参考： <a href="index.html#demo-other">#示例</a></p>
<pre><code class="layui-code">layer.tab({
  area: ['600px', '300px'],
  tab: [{ // 标签层的数据源
    title: '标题 1', 
    content: '内容 1'
  }, {
    title: '标题 2', 
    content: '内容 2'
  }, {
    title: '标题 3', 
    content: '内容 3'
  }]
});
</code></pre>
<h2 id="close" lay-toc="{level: 2}">关闭弹层</h2>
<p><code>layer.close(index);</code></p>
<ul>
<li>参数 <code>index</code> : 打开弹层时返回的唯一索引</li>
</ul>
<p>该方法用于关闭对应的弹层。</p>
<pre><code class="layui-code">// 每一种弹层调用方式，都会返回一个 index
var index1 = layer.open();
var index2 = layer.alert();
var index3 = layer.load();
var index4 = layer.tips();
// 关闭对应的弹层
layer.close(index1);
</code></pre>
<p>在 iframe 弹层页面中关闭自身</p>
<pre><code class="layui-code">var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
parent.layer.close(index); // 再执行关闭 
</code></pre>
<h2 id="closeAll" lay-pid="api" class="ws-anchor ws-bold">关闭所有层</h2>
<p><code>layer.closeAll(type);</code></p>
<ul>
<li>参数 <code>type</code> : 弹层的类型。可选值：<code>dialog,page,iframe,loading,tips</code></li>
</ul>
<p>该方法用于关闭所有同类型的弹层。</p>
<pre><code class="layui-code">layer.closeAll(); // 关闭所有类型的层
layer.closeAll('dialog'); // 关闭所有的信息框
layer.closeAll('page'); // 关闭所有的页面层
layer.closeAll('iframe'); // 关闭所有的 iframe 层
layer.closeAll('loading'); // 关闭所有的加载层
layer.closeAll('tips'); // 关闭所有的 tips 层
</code></pre>
<h2 id="closeLast" lay-pid="api" class="ws-anchor ws-bold">关闭最近一次打开的层 <sup>2.8+</sup></h2>
<p><code>layer.closeLast(type);</code></p>
<ul>
<li>参数 <code>type</code> : 弹层的类型。可选值：<code>dialog,page,iframe,loading,tips</code></li>
</ul>
<p>该方法用于关闭最近一次打开的对应类型的层。</p>
<pre><code class="layui-code">layer.closeLast('dialog'); // 关闭最近一次打开的信息框
layer.closeLast('page'); // 关闭最近一次打开的页面层
layer.closeLast('iframe'); // 关闭最近一次打开的 iframe 层
layer.closeLast('loading'); // 关闭最近一次打开的加载层
layer.closeLast('tips'); // 关闭最近一次打开的 tips 层
</code></pre>
<h2 id="config" lay-pid="api" class="ws-anchor ws-bold">全局配置默认属性</h2>
<p><code>layer.config(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>该方法用于全局设置弹层的默认基础属性。</p>
<pre><code class="layui-code">layer.config({
  title: '默认标题',
  skin: '', // 设置默认主题
  // … 其他任意基础属性
})
</code></pre>
<h2 id="ready" lay-pid="api" class="ws-anchor ws-bold">样式初始化就绪</h2>
<p><code>layer.ready(callback);</code></p>
<ul>
<li>参数 <code>callback</code> : 初始化完毕后的回调函数</li>
</ul>
<p>该方法一般是在源码方式引入 <code>layui.js</code>，且要在页面初始即弹出层时使用，以确保弹层所依赖的样式文件先行加载。 而引入 release 版的 <code>layui.js</code> 则无需使用该方法，因为弹层样式已经统一合并到 <code>layui.css</code> 中。</p>
<pre><code class="layui-code">// 页面初始弹出层
layer.ready(function(){
  layer.alert('对话框内容');
});
</code></pre>
<h2 id="set-style" lay-pid="api" class="ws-anchor ws-bold">重新设置弹层样式</h2>
<p><code>layer.style(index, css);</code></p>
<ul>
<li>参数 <code>index</code> : 打开弹层时返回的唯一索引</li>
<li>参数 <code>css</code> : 要设置的 <code>css</code> 属性</li>
</ul>
<p>该方法对 <code>loading</code> 层和 <code>tips</code> 层无效。</p>
<pre><code class="layui-code">// 打开弹层
var index = layer.open({
  type: 1,
  content: '内容'
});
// 重新给对应层设定 width、top 等
layer.style(index, {
  width: '1000px',
  top: '10px'
});  
</code></pre>
<h2 id="set-title" lay-pid="api" class="ws-anchor ws-bold">设置弹层的标题</h2>
<p><code>layer.title(title, index);</code></p>
<ul>
<li>参数 <code>title</code> : 标题</li>
<li>参数 <code>index</code> : 打开弹层时返回的唯一索引</li>
</ul>
<pre><code class="layui-code">// 打开弹层
var index = layer.open({
  type: 1,
  content: '内容'
});
// 重新设置标题
layer.title('新标题', index)
</code></pre>
<h2 id="getChildFrame" lay-pid="api" class="ws-anchor ws-bold">获取 iframe 页中的元素</h2>
<p><code>layer.getChildFrame(selector, index);</code></p>
<ul>
<li>参数 <code>selector</code> : iframe 子页面的选择器或元素对象</li>
<li>参数 <code>index</code> : 打开弹层时返回的唯一索引</li>
</ul>
<p>该方法用于在父页面获取 iframe 子页面中的元素</p>
<pre><code class="layui-code">layer.open({
  type: 2, // iframe 层
  content: '/layer/test/iframe.html',
  success: function(layero, index){
    // 获取 iframe 中 body 元素的 jQuery 对象
    var body = layer.getChildFrame('body', index);
    // 给 iframe 页中的某个输入框赋值
    body.find('input').val('Hello layer.');
  }
});  
</code></pre>
<h2 id="getFrameIndex" lay-pid="api" class="ws-anchor ws-bold">在 iframe 页中获取弹层索引</h2>
<p><code>layer.getFrameIndex(window.name);</code></p>
<ul>
<li>参数 <code>window.name</code> : 当前 iframe 窗口的 <code>name</code> 属性值</li>
</ul>
<p>该方法用于在 iframe 页面内部获取当前 iframe 弹层的索引，以便关闭自身。</p>
<pre><code class="layui-code">var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引
parent.layer.close(index); // 关闭当前 iframe 弹层
</code></pre>
<h2 id="iframeAuto" lay-pid="api" class="ws-anchor ws-bold">设置 iframe 层高度自适应</h2>
<p><code>layer.iframeAuto(index);</code></p>
<ul>
<li>参数 <code>index</code> : 打开弹层时返回的唯一索引</li>
</ul>
<p>该方法可让 iframe 高度跟随内容自适应</p>
<pre><code class="layui-code">layer.open({
  type: 2, // iframe 层
  content: '/layer/test/iframe.html',
  area: '600px', // 弹层初始宽度
  success: function(layero, index, that){
    layer.iframeAuto(index); // 让 iframe 高度自适应
    that.offset(); // 重新自适应弹层坐标
  }
}); 
</code></pre>
<h2 id="iframeSrc" lay-pid="api" class="ws-anchor ws-bold">重新设置 iframe 层 URL</h2>
<p><code>layer.iframeSrc(index, url);</code></p>
<ul>
<li>参数 <code>index</code> : 打开弹层时返回的唯一索引</li>
<li>参数 <code>url</code> : URL 地址</li>
</ul>
<pre><code class="layui-code">// 打开弹层
var index = layer.open({
  type: 2, // iframe 层
  content: '/layer/test/iframe.html'
}); 
// 重置 iframe 页面 URL
layer.iframeSrc(index, 'https://cn.bing.com/');
</code></pre>
<h2 id="setTop" lay-pid="api" class="ws-anchor ws-bold">置顶弹层</h2>
<p><code>layer.setTop(layero);</code></p>
<ul>
<li>参数 <code>layero</code> : layer 最外层容器的元素对象，一般可通过各个回调函数返回的参数获取。</li>
</ul>
<p>该方法一般用于多弹层模式时，实现点击某个弹层让其层叠顺序置顶。效果参考：<a href="index.html#demo-more">#示例</a></p>
<pre><code class="layui-code">// 多弹层模式的层叠顺序置顶
layer.open({
  type: 1, // 页面层
  shade: false,
  area: ['520px', '320px'],
  maxmin: true,
  content: '&lt;div style=&quot;padding: 16px;&quot;&gt;多弹层模式的层叠顺序置顶&lt;/div&gt;',
  zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
  success: function(layero){
    layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
  }
}); 
</code></pre>
<h2 id="full" lay-pid="api" class="ws-anchor ws-bold">设置弹层最大化</h2>
<p><code>layer.full(index);</code></p>
<ul>
<li>参数 <code>index</code> : 打开弹层时返回的唯一索引</li>
</ul>
<pre><code class="layui-code">// 打开弹窗
var index = layer.open({
  type: 1, // 页面层
  content: '弹层内容'
});
// 设置弹层最大化
layer.full(index);
</code></pre>
<h2 id="min" lay-pid="api" class="ws-anchor ws-bold">设置弹层最小化</h2>
<p><code>layer.min(index);</code></p>
<ul>
<li>参数 <code>index</code> : 打开弹层时返回的唯一索引</li>
</ul>
<pre><code class="layui-code">// 打开弹窗
var index = layer.open({
  type: 1, // 页面层
  content: '弹层内容'
});
// 设置弹层最大化
layer.min(index);
</code></pre>
<h2 id="restore" lay-pid="api" class="ws-anchor ws-bold">还原弹层</h2>
<p><code>layer.restore(index);</code></p>
<ul>
<li>参数 <code>index</code> : 打开弹层时返回的唯一索引</li>
</ul>
<p>当弹层最大化或最小化状态时，执行该方法可还原弹层。</p>
<h2>贴士</h2>
<blockquote class="layui-elem-quote">
<p>layer 曾经可作为单独组件使用，鉴于维护成本的考量，目前 layer 组件已完全集成到 Layui 中，而单独版本已不做同步维护。 因此，建议直接使用 layui 中 layer 即可。</p>
</blockquote class="layui-elem-quote">

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/layer/index.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>